<template>
  <el-dialog title="绑定条文" :visible.sync="dialogVisible" @opened="dialogOpen" width="60%">
    <el-form ref="form" :model="form" label-width="250px" size="small">
      <el-row>
        <el-col :span="12">
          <d2-crud
            ref="d2Crud"
            :columns="columns"
            :data="dataTable"
            :options="options"
            @row-click="rowClick"
            index-row
            @selection-change="selectChange"
            @current-change="handleCurrentChange"
            :pagination="pagination"
            @pagination-current-change="paginationCurrentChange"
            :rowHandle="rowHandle"
            @add-model="add"
          >
            <div class="title" slot="header">
              <span class="text">法条列表</span>
            </div>
          </d2-crud>
        </el-col>
        <el-col :span="12" style="padding-left: 10px">
          <d2-crud
            ref="d2Crud"
            :columns="columns"
            :data="dataTablebind"
            :options="options"
            @current-change="handleCurrentChangebind"
            :rowHandle="rowHandlebind"
            @del-model="del"
          >
            <div class="title" slot="header">
              <span class="text">已关联法条列表</span>
            </div>
          </d2-crud>
        </el-col>
      </el-row>

      <!-- <el-form-item
        prop="contentId"
        label="法规条文"
      >
        <el-select v-model="form.contentId" placeholder="请选择">
              <el-option
                v-for="item in publics"
                :key="item.id"
                :label="item.yjtl"
                :value="item.id"
              ></el-option>
            </el-select>
      </el-form-item>-->
      <!-- <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="bindContent"
        >保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>-->
    </el-form>
  </el-dialog>
</template>
<script>
import casecauseApi from "@/api/system/casecause";
import caseCauselawcontentApi from "@/api/system/caseCauselawcontent";
import caseCauseContentApi from "@/api/system/caseCauseContent";

import { Radio } from "element-ui";
export default {
  name: "casecauseBindForm",
  props: {
    value: Boolean,
    bindModel: Object
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      form: {
        content: "",
        casecauseNumber: "",
        remark: "",
        zfmlId: ""
      },
      columns: [
        {
          title: "法规名称",
          key: "strName",
          width: "180"
        },
        {
          title: "法条编码",
          key: "code",
          width: "120"
        },
        {
          title: "违反条例",
          key: "yjtl"
        }
      ],
      rowHandle: {
        width: 150,
        custom: [
          {
            title: "新增",
            size: "mini",
            emit: "add-model",
            icon: "fa fa-plus",
            style: "color:#409eff;"
          }
        ]
      },
      rowHandlebind: {
        width: 150,
        custom: [
          {
            title: "删除",
            size: "mini",
            emit: "del-model",
            icon: "el-icon-delete",
            style: "color:#f56c6c;"
          }
        ]
      },
      data: [],
      dataTable: [],
      dataTablebind: [],
      options: {
        stripe: true,
        highlightCurrentRow: true
      },
      currentId: null,
      editFormVisible: false,
      dept: {},
      temp: {},
      addFormVisible: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      selected: []
    };
  },
  watch: {
    value(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit("input", val);
    }
  },
  methods: {
    dialogOpen() {
      //this.$refs.form.resetFields();
      this.contentList();
      this.contentedList();
      this.form = this.bindModel;
    },
    contentList() {
      caseCauselawcontentApi.getWithoutCauseId(this.pagination).then(res => {
        var data = res.data;
        this.data = data.rows;
        this.dataTable = data.rows;
        this.pagination.total = data.total;
      });
    },
    contentedList() {
      var param = { causeId: this.bindModel.causeId };
      Object.assign(this.pagination, param);
      caseCauselawcontentApi.getlawcontent(this.pagination).then(res => {
        var data = res.data;
        this.data = data.rows;
        this.dataTablebind = data.rows;
      });
    },
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.contentList();
    },
    selectChange(selection) {
      //多选
      //this.selected = Radio;
    },
    rowClick(row) {
      this.$refs.d2Crud.$children[1].toggleRowSelection(row);
    },
    handleCurrentChange(currentRow) {
      if (currentRow) {
       /*  this.bindModel.contentId = currentRow.id;
        //新增违法法条关联
        casecauseApi.bind({ ...this.bindModel }).then(data => {
          this.loading = false;
          this.contentList();
          this.contentedList(); 
        });*/
      }
    },
    handleCurrentChangebind(currentRow) {
      if (currentRow) {
        this.bindModel.contentId = currentRow.id;
       /*  //删除违法法条关联
        caseCauseContentApi.del({ ...this.bindModel }).then(data => {
          this.loading = false;
          this.contentList();
          this.contentedList();
        }); */
        
      }
    },
    add(rd) {
      let row = {};
      if (rd) {
        rd = rd.row;
        this.bindModel.contentId = rd.id;
        //新增违法法条关联
        casecauseApi.bind({ ...this.bindModel }).then(data => {
          this.loading = false;
          this.contentList();
          this.contentedList();
        });
      }
    },
    async del(rd) {
      this.$confirm("确认删除？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消"
      }).then(async () => {
         let row = {};
         rd = rd.row;
        this.bindModel.contentId = rd.id;
        //删除违法法条关联
        caseCauseContentApi.del({ ...this.bindModel }).then(data => {
          this.loading = false;
          this.contentList();
          this.contentedList();
        });
      });
    },
    getContent(type) {
      caseCauselawcontentApi.dorpList().then(res => {
        var data = res.data;
        this.publics = data;
      });
    },
    bindContent() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          casecauseApi.bind({ ...this.form }).then(data => {
            this.loading = false;
            this.dialogVisible = false;
            this.$emit("submit");
          });
        } else {
          return false;
        }
      });
    },
    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>

